<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref,defineEmits } from 'vue';
import { useStore } from 'vuex'; // 导入 useStore 钩子
const store = useStore(); // 使用 useStore 钩子获取 store 实例
const emits = defineEmits(['update:visible']);
function updateParent(value: boolean) {
    emits('update:visible', value);}

// 使用映射的 action
const useAuth=() =>{
  if(store.state.LoginState.isLoggedIn){
    updateParent(false);
  }else{
    updateParent(true);


  }
    
}

const showLogin = () => {
  useAuth();
};

const router = useRouter();
const navigateTo = (page : string) => {
    try{
        console.log(page)
            router.push({ name: page });
    }finally{

}
};

</script>

<template>
    <div class="myself_container">
        <el-row :gutter="0" justify="space-around">
            <el-col :span="3"><div class="content" @click="navigateTo('Home')">
                <div class="icon"><img src=""></div>
                <div class="title">首页</div>
            </div></el-col>
            <el-col :span="3"><div class="content" @click="navigateTo('Shequ')">
                <div class="icon">
                    <img src="">
                </div>
                <div class="title">社区</div>
            </div></el-col>
            <el-col :span="3"><div class="content" @click="navigateTo('Bizhi')">
                <div class="icon">
                    <img src="">

                </div>
                <div class="title">壁纸</div>
            </div></el-col>
            <el-col :span="3"><div class="content">
                <div style="width: 100%;height: 100%;align-items: center;">
                    <img style="width: 100%;height: 60%;" src="">

                </div>
            </div></el-col>
            <el-col :span="3"><div class="content" @click="navigateTo('Jiaocheng')">
                <div class="icon">
                    <img src="">

                </div>
                <div class="title">教程</div>
            </div></el-col>
            <el-col :span="3"><div class="content" @click="navigateTo('Wenjian')">
                <div class="icon">
                    <img src="">

                </div>
                <div class="title">文件</div>
            </div></el-col>
            <el-col :span="3"><div class="content" @click=showLogin>
                <div class="icon">
                    <img src="">

                </div>
                <div class="title">我的</div>
            </div></el-col>
         

        </el-row>
        
    </div>
</template>
<style lang="scss" scoped>
.el-row {
    height: 100%;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  height: 100%;

}
.el-col:hover {
  background-color: rgba(223, 223, 223, 0.623);

}

.content {
  border-radius: 4px;
  min-height: 36px;
  height: 100%;
  text-align: center;
  .title{
    font-size: 10px;
  }
  .icon{
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: center;
        img{
            height: 100%;
        }
    }
}
.myself_container
{
    padding-top: 10px;
    width: 100%;
    height: 70px;
    background-color: rgb(255, 255, 255);
    z-index: 999;
    position: absolute;
    bottom: 0;
}

@media (min-width: 1600px) {
.myself_container
{

    display: none;

}

}

@media (max-width: 768px) {
.myself_container
{
    margin-top: 5px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    z-index: 999;
    position: absolute;
    bottom: 0;
    height: 40px;
}

}
</style>